
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form>
		<!-- 219970909黄世萍 -->
		  <label for="username">用户名：</label>
		  <input type="text" id="username" name="username">
		  <p id="username-message"></p>
		  <button type="button" onclick="checkUsername()">检查用户名</button>
		</form>	
		<script type="text/javascript">
		function checkUsername() {
		  // 获取用户名输入框
		  const usernameInput = document.getElementById("username");
		  // 获取用户名输入框的值
		  const username = usernameInput.value;
		  // 获取用于显示消息的元素
		  const messageElement = document.getElementById("username-message");
		
		  // 发送 AJAX 请求
		  const xhr = new XMLHttpRequest();
		  xhr.onreadystatechange = function() {
		    if (xhr.readyState === XMLHttpRequest.DONE) {
		      if (xhr.status === 200) {
		        // 如果返回状态码为 200，表示请求成功
		        // 解析响应数据
		        const response = JSON.parse(xhr.responseText);
		        if (response.exists) {
		          // 如果用户名已存在，显示错误消息
		          messageElement.textContent = "用户名已存在";
		        } else {
		          // 如果用户名不存在，清空错误消息
		          messageElement.textContent = "";
		        }
		      } else {
		        // 如果返回状态码不为 200，表示请求失败
		        messageElement.textContent = "请求失败";
		      }
		    }
		  };
		  xhr.open("GET", `/api/check-username?username=${encodeURIComponent(username)}`);
		  xhr.send();
		}
	</body>
</html>
‘’
